<template>
  <div class="login-container">
    <!-- 背景装饰元素（与登录页一致） -->
    <div class="bg-decoration"></div>
    
    <div class="login-wrapper">
      <!-- 注册卡片（复用登录页卡片样式） -->
      <el-card class="login-card">
        <!-- 头部标识（对齐登录页：头像+标题+副标题） -->
        <div class="login-header">
          <el-avatar class="login-logo" size="large">
            <i class="el-icon-user-plus"></i>
          </el-avatar>
          <h2 class="login-title">工作人员注册</h2>
          <p class="login-subtitle">请填写注册信息完成账号创建</p>
        </div>

        <!-- 注册表单（对齐登录页表单样式） -->
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="rules"
          label-width="80px"
          class="login-form"
          @keyup.enter="register"
        >
          <!-- 密码输入框（加图标+焦点效果） -->
          <el-form-item label="密码" prop="employeePassword">
            <el-input
              v-model="registerForm.employeePassword"
              type="password"
              placeholder="请输入密码"
              show-password
              prefix-icon="el-icon-lock"
              @keyup.enter="register"
              :class="{ 'input-focus': isPasswordFocused }"
              @focus="isPasswordFocused = true"
              @blur="isPasswordFocused = false"
            />
          </el-form-item>

          <!-- 确认密码输入框（加图标+焦点效果） -->
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              show-password
              prefix-icon="el-icon-lock"
              @keyup.enter="register"
              :class="{ 'input-focus': isConfirmPwdFocused }"
              @focus="isConfirmPwdFocused = true"
              @blur="isConfirmPwdFocused = false"
            />
          </el-form-item>

          <!-- 门店ID输入框（加图标+焦点效果） -->
          <el-form-item label="门店ID" prop="storeId">
            <el-input
              v-model="registerForm.storeId"
              placeholder="请输入门店ID"
              prefix-icon="el-icon-office-building"
              @keyup.enter="register"
              :class="{ 'input-focus': isStoreIdFocused }"
              @focus="isStoreIdFocused = true"
              @blur="isStoreIdFocused = false"
            />
          </el-form-item>
        </el-form>

        <!-- 注册按钮（对齐登录页：加载状态+hover效果） -->
        <el-button 
          type="primary" 
          style="width: 100%" 
          @click="register"
          :loading="isLoading"
          class="login-btn"
        >
          <template #default>
            <span v-if="!isLoading">注册</span>
            <span v-else>
              <i class="el-icon-loading"></i>
              注册中...
            </span>
          </template>
        </el-button>

        <!-- 登录链接（对齐登录页链接样式） -->
        <div class="register-link">
          已有账号？
          <router-link to="/login" class="register-text">登录</router-link>
        </div>
      </el-card>

      <!-- 页脚信息（与登录页完全一致） -->
      <div class="login-footer">
        <p>© 2023 员工管理系统 - 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { post } from '../utils/axios'
import qs from 'qs'

const router = useRouter()
const registerFormRef = ref()

// 表单数据（保持原业务逻辑）
const registerForm = reactive({
  employeePassword: '',
  confirmPassword: '',
  storeId: ''
})

// 交互状态（对齐登录页：加载+输入框焦点）
const isLoading = ref(false)
const isPasswordFocused = ref(false)
const isConfirmPwdFocused = ref(false)
const isStoreIdFocused = ref(false)

// 表单验证规则（保持原业务逻辑）
const rules = {
  employeePassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (_, value, callback) =>
        value === registerForm.employeePassword
          ? callback()
          : callback(new Error('两次输入密码不一致')),
      trigger: 'blur'
    }
  ],
  storeId: [
    { required: true, message: '请输入门店ID', trigger: 'blur' },
    { pattern: /^[1-9]\d*$/, message: '门店ID必须为正整数', trigger: 'blur' }
  ]
}

// 注册逻辑（保持原业务逻辑，新增加载状态控制）
async function register() {
  // 1. 前端表单验证
  try {
    await registerFormRef.value.validate()
  } catch {
    return
  }

  const params = {
    employeePassword: registerForm.employeePassword,
    storeId: Number(registerForm.storeId)
  }

  try {
    // 2. 显示加载状态（对齐登录页交互）
    isLoading.value = true

    // 3. 调用后端注册接口
    const res = await post('/employee/registeremployee', null, {
      params,
      paramsSerializer: p => qs.stringify(p)
    })

    if (res.state === 'success') {
      ElMessage.success(`注册成功，你的员工ID是：${res.employeeId}`)
      // 延迟跳转（让用户看到成功提示，对齐登录页体验）
      setTimeout(() => {
        router.replace('/login')
      }, 800)
    } else {
      ElMessage.error(res.message || '注册失败')
    }
  } catch (err) {
    console.error(err)
    ElMessage.error('注册异常，请稍后重试')
  } finally {
    // 4. 关闭加载状态
    isLoading.value = false
  }
}
</script>

<style scoped>
/* 完全复用登录页样式类，确保视觉统一 */
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;
  position: relative;
}

.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 20%);
  z-index: 1;
}

.login-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 20px;
}

.login-card {
  width: 100%;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: all 0.3s ease;
}

.login-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo {
  margin: 0 auto 15px;
  background-color: #409eff;
  transition: transform 0.3s ease;
}

.login-card:hover .login-logo {
  transform: scale(1.05);
}

.login-title {
  margin: 0 0 8px;
  color: #303133;
  font-weight: 600;
  font-size: 22px;
}

.login-subtitle {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.login-form {
  margin-bottom: 30px;
}

/* 输入框焦点效果（与登录页一致） */
.input-focus .el-input__wrapper {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 注册按钮样式（复用登录页按钮样式） */
.login-btn {
  height: 45px;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-btn:not(.is-loading):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 登录链接样式（复用登录页链接样式） */
.register-link {
  margin-top: 15px;
  text-align: center;
  color: #606266;
  font-size: 14px;
}

.register-text {
  color: #409eff;
  margin-left: 4px;
  transition: color 0.2s;
}

.register-text:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 页脚样式（与登录页一致） */
.login-footer {

  margin-top: 20px; 
  text-align: center;
}

.login-footer p {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

/* 响应式调整（与登录页一致） */
@media (max-width: 768px) {
  .login-card {
    padding: 25px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  }
  
  .login-title {
    font-size: 20px;
  }
  
  .login-btn {
    height: 42px;
    font-size: 15px;
  }
}
</style>